<template>
    <div class="AsidePage">
        <el-tree
            :indent="8"
            highlight-current
            :data="data"
            @node-click="handleNodeClick">
            <div slot-scope="{ node, data }">
                <img v-if="node.level === 1 && !data.children" :src="folder_icon_default" alt="">
                <img v-if="node.level === 1 && data.children" :src="node.expanded ? folder_icon_reduce : folder_icon_plus" alt="">
                <span :class="'nodeLevel-' + node.level" :style="node.level >= 3 ? 'font-size: 14px' : ''">{{ data.name }}</span>
            </div>
        </el-tree>
    </div>
</template>

<script>
import { getOrganizationTree, getOrganizationItem } from '@/api/data-management'

export default {
    name: 'AsidePage',
    async created () {
        await this.getOrganizationTree()
        await this.getOrganizationItem(this.data[0].id)
    },
    data () {
        return {
            data: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            folder_icon_default: require('@/assets/others/folder.png'),
            folder_icon_plus: require('@/assets/others/folder+.png'),
            folder_icon_reduce: require('@/assets/others/folder-.png'),
        }
    },
    methods: {
        async handleNodeClick (data) {
            document.querySelector('.el-tree .is-current').classList.remove('is-current')
            await this.getOrganizationItem(data.id)
        },
        async getOrganizationTree () {
            const res = await getOrganizationTree()
            this.data = JSON.parse(res.data.data)
            this.$nextTick(() => {
                document.querySelector('.el-tree > div:first-of-type').classList.add('is-current')
            })
        },
        async getOrganizationItem(id) {
            const res = await getOrganizationItem(id)
            this.$emit('getOrganization', res.data.data)
            if (res.data.msg === 'ok') this.$message.success('获取机构信息成功')
        }
    }
}
</script>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.AsidePage {
    min-width: 220px;
    background-color: white;
    border-radius: 5px;
    color: #2A2929;
    padding: 12px;
    margin: 12px;

    ::v-deep .el-tree {
        font-size: 14px;
        color: #919191;

        .is-current > div:first-of-type div span {
            color: #FF7A63;
        }

        .el-tree-node__content {
            height: 40px;
        }

        .nodeLevel-2 {
            color: #6D6D6D;
        }

        > div > div:first-of-type {
            color: #2A2929;

            > span {
                display: none;
            }
        }

        .el-icon-caret-right {
            margin-left: 10px;
        }

        div {
            border-radius: 3px;

            img {
                width: 14px;
                margin: 0 8px 0 10px;
            }
        }
    }


}
</style>
